<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="<%=basePath %>/static/css/logo.png">
    <link rel="stylesheet" href="<%=basePath %>/static/css/iconfont.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/global.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/swiper.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/styles.css">
    <link rel="stylesheet" href="<%=basePath %>/static2/assets/layer/skin/layer.css">

    <script src="<%=basePath %>/static/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/swiper.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/global.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static2/assets/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript">

        //查询到所有的商品信息
        $(document).ready(function () {
            var goodid = '<%=request.getParameter("goodid")%>';
            //alert(goodid);
            var theme = '<%=session.getAttribute("username")%>';
            //alert(theme);
            if (theme == null || theme == "null") {
                $("#dengluzhuce").show();
                $("#tuichudenglu").hide();
                $("#xianshi").hide();
            } else {
                $("#dengluzhuce").hide();
                $("#tuichudenglu").show();
            }

            $.ajax({
                type: "POST",
                url: "../web/SelectShopCart",
                //data:{userid:userid},
                //dataType:"json",
                success: function (data) {
                    //alert("ajax");

                }
            });

        });

        function member_dele(obj, id) {
            //alert("layer以外");
            layer.confirm('确认要删除吗？', function (index) {
                //alert("进入layer");
                $.ajax({
                    type: "POST",
                    url: "../web/DelGoodsInSc",
                    data: "goodId=" + id,
                    dataType: "json",
                    success: function (data) {
                        //alert("ajax");
                    }
                });
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
            });
        }

        //全选函数
        function setAll() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = true;
            }
        }

        //全不选函数
        function setNo() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = false;
            }
        }

        //反选
        function setOthers() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                if (loves[i].checked == false)
                    loves[i].checked = true;
                else
                    loves[i].checked = false;
            }
        }

        //全选/全不选操作
        function setAllNo() {
            var box = document.getElementById("boxid");
            var loves = document.getElementsByName("love");
            if (box.checked == false) {
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = false;
                }
            } else {
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = true;
                }
            }
        }

        function getData() {
            var obj = document.getElementsByName('love'); //选择所有name="'love'"的对象，返回数组
            //取到对象数组后，我们来循环检测它是不是被选中
            var s = '';
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) s += obj[i].value + ','; //如果选中，将value添加到变量s中
            }
            //那么现在来检测s的值就知道选中的复选框的值了
            if (s == '') return;

            window.location.href = '../web/addorder_goods?orderData=' + s;
            //在这里使用controller进行跳转，而不使用ajax
        }

    </script>
    <title>卓越图书网</title>
    <base href="<%=basePath%>jsp/"/>
</head>
<body>
<!-- 顶部tab -->
<div class="tab-header">
    <div class="inner">
        <div class="pull-left">
            <div class="pull-left">嗨，欢迎来到<span class="cr">卓越图书网</span>
                <span id="xianshi">尊敬的<%out.println(session.getAttribute("username")); %></span>
            </div>

        </div>
        <div class="pull-right" id="dengluzhuce">
            <a href="<%=basePath%>jsp/login.jsp"><span class="cr">登录</span></a>
            <a href="<%=basePath%>jsp/login.jsp?p=register">注册</a>
        </div>
        <div class="pull-right" id="tuichudenglu">
            <a href="<%=basePath%>jsp/udai_welcome.jsp"><span class="cr">个人中心</span></a>
            <a href="<%=basePath%>jsp/login.jsp"><span class="cr">退出登录</span></a>
        </div>
    </div>
</div>
<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <a class="logo" href="<%=basePath%>jsp/homePage.jsp"><img src="<%=basePath%>static/images/icons/logo.png"
                                                                      alt="卓越图书网" class="cover"></a>
            <div class="title">购物车</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="user-content__box clearfix bgf">
            <div class="title">购物车</div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th width="75"><label></label></th>
                    <th width="150">图片</th>
                    <th width="250">商品信息</th>
                    <th width="150">单价</th>
                    <th width="200">数量</th>
                    <th width="200">总价</th>
                    <th width="80">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${shopcartList}" var="good">

                    <tr>
                        <td><input type="checkbox" class="ace" name="love"
                                   value="${good.goodsId }+${good.price }+${good.count }+${good.goodsImg}"></td>
                        <th scope="row">
                            <label class="checked-label">
                                <input type="hidden" class="id" value="${good.goodsId }">
                                <div class="img"><img src="<%=basePath%>${good.goodsImg }" alt="" class="cover"></div>
                            </label>
                        </th>
                        <td>
                            <div class="name ep3">名称：${good.goodsName }</div>
                        </td>
                        <td>¥${good.price }</td>

                        <td>
                            <div class="cart-num__box">
                                <input type="button" class="sub" value="-">
                                <input type="text" class="val" value="${good.count }" maxlength="2">
                                <input type="button" class="add" value="+">
                                <input type="hidden" class="id" value="${good.goodsId }">
                            </div>
                        </td>
                        <td id="account">
                                ${good.price * good.count}
                        </td>
                        <td>
                            <a onclick="member_dele(this,'${good.goodsId }')" id="deleteshopcart" class="btn">删除</a>
                            <a class="btn" onclick="getData()">支付</a>
                        </td>
                    </tr>

                </c:forEach>
                </tbody>
            </table>
            <input type="checkbox" id="boxid" onclick="setAllNo()"/>全选/取消全选

            <!--
            <input type="button" value="全选" onclick="setAll()" />
            <input type="button" value="全不选" onclick="setNo()" />
            <input type="button" value="反选" onclick="setOthers()" />
             -->

            <div class="user-form-group tags-box shopcart-submit pull-right">

            </div>
            <button style="float: right;" onclick="getData()">结算</button>
            <div class="checkbox shopcart-total">
                <div class="pull-right">
                </div>
            </div>
            <script>
                $(document).ready(function () {
                    var $check_all = $('.check-all'),
                        $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]');

                    // 全选
                    $check_all.on('click', function () {
                        if ($(".check-all").prop('checked')) {
                            $item_checkboxs.prop('checked', $(".check-all").prop('checked'));
                            $.ajax({
                                type: "GET",
                                url: "AllSelect",
                                data: {},
                                dataType: "json",
                                success: function (data) {
                                    $("#sum").jsp(data);
                                }
                            });
                        } else {
                            $item_checkboxs.prop('checked', $(".check-all").prop('checked'));
                            $.ajax({
                                type: "GET",
                                url: "AllNotSelect",
                                data: {},
                                dataType: "json",
                                success: function (data) {
                                    $("#sum").jsp(data);
                                }
                            });
                        }
                    });

                    // 点击选择
                    $item_checkboxs.on('change', function () {
                        var flag = true;
                        $item_checkboxs.each(function () {
                            if (!$(this).prop('checked')) {
                                flag = false
                            }
                        });
                        $check_all.prop('checked', flag);
                    });
                    //点击选择而引起的总价变动
                    $item_checkboxs.on('click', function () {
                        if (!$(this).prop('checked')) {
                            $.ajax({
                                type: "GET",
                                url: "SingleSelect",
                                data: {
                                    sum: "" + $("#sum").jsp() + "",
                                    goodsId: "" + $(this).siblings('.id').val() + "",
                                    method: "-"
                                },
                                dataType: "json",
                                success: function (data) {
                                    $("#sum").jsp(data);
                                }
                            });
                        } else {
                            $.ajax({
                                type: "GET",
                                url: "SingleSelect",
                                data: {
                                    sum: "" + $("#sum").jsp() + "",
                                    goodsId: "" + $(this).siblings('.id').val() + "",
                                    method: "+"
                                },
                                dataType: "json",
                                success: function (data) {
                                    $("#sum").jsp(data);
                                }
                            });
                        }

                    });
                    // 个数限制输入数字
                    $('input.val').onlyReg({reg: /[^0-9.]/g});
                    // 加减个数,$(this).siblings('.val').val(Math.max((value -= 1),1));
                    $('.cart-num__box').on('click', '.sub,.add', function () {
                        var value = parseInt($(this).siblings('.val').val());
                        if ($(this).hasClass('add')) {
                            // var theval =$('#account').val();
                            //alert("点击了加，准备修改总价"+ theval );
                            $.ajax({
                                type: "GET",
                                url: "../web/UpdateCount",
                                data: {goodsId: "" + $(this).siblings('.id').val() + "", method: "+"},
                                dataType: "json",
                                success: function (data) {
                                    $('#account').html(data.price * data.count);
                                }
                            });
                            $(this).siblings('.val').val(Math.min((value += 1), 99));
                        } else {
                            $.ajax({
                                type: "GET",
                                url: "../web/UpdateCount",
                                data: {goodsId: "" + $(this).siblings('.id').val() + "", method: "-"},
                                dataType: "json",
                                success: function (data) {
                                    $('#account').html(data.price * data.count);
                                }
                            });
                            $(this).siblings('.val').val(Math.max((value -= 1), 1));
                        }
                    });
                });
            </script>

        </div>
    </section>
</div>

<!-- 底部信息 -->
<div class="footer">
    <div class="footer-tags">
        <div class="tags-box inner">
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_1.gif" alt="厂家直供">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_2.gif" alt="一件代发">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_3.gif" alt="美工活动支持">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_4.gif" alt="信誉认证">
            </div>
        </div>
    </div>
    <div class="copy-box clearfix">
        <p class="copyright">
            ©卓越图书网 版权所有，并保留所有权利<br>
            河南省郑州市中原区科学大道100号
        </p>
    </div>
</div>
</body>
</html>